<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>总结 最近一个 项目 所用的新知识 | JOE&#39; Blog</title>
    <meta name="generator" content="VuePress 1.5.1">
    <link rel="icon" href="/vuepress-blog/favicon.ico">
    <meta name="description" content="个人博客">
    <meta name="keywords" content="前端博客,joe">
    <link rel="preload" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css" as="style"><link rel="preload" href="/vuepress-blog/assets/js/app.c2c176f8.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/2.cfb39290.js" as="script"><link rel="preload" href="/vuepress-blog/assets/js/10.e6cc7d41.js" as="script"><link rel="prefetch" href="/vuepress-blog/assets/js/3.5196b5a8.js"><link rel="prefetch" href="/vuepress-blog/assets/js/4.5159fade.js"><link rel="prefetch" href="/vuepress-blog/assets/js/5.ad0004fd.js"><link rel="prefetch" href="/vuepress-blog/assets/js/6.9d4540a4.js"><link rel="prefetch" href="/vuepress-blog/assets/js/7.0748d6e8.js"><link rel="prefetch" href="/vuepress-blog/assets/js/8.6b7d4a9b.js"><link rel="prefetch" href="/vuepress-blog/assets/js/9.8e98eab6.js">
    <link rel="stylesheet" href="/vuepress-blog/assets/css/0.styles.1d2502bd.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vuepress-blog/" class="home-link router-link-active"><!----> <span class="site-name">JOE' Blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vuepress-blog/" class="nav-link">
  Home
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Category" class="dropdown-title"><span class="title">Category</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#笔记" class="nav-link">
  Note
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#总结" class="nav-link">
  Summary
</a></li><li class="dropdown-item"><!----> <a href="/vuepress-blog/guide.html#文章" class="nav-link">
  Article
</a></li></ul></div></div><div class="nav-item"><a href="/vuepress-blog/about.html" class="nav-link">
  About
</a></div><div class="nav-item"><a href="https://github.com/Galileo01" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>总结 最近一个 项目 所用的新知识</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/vuepress-blog/summary/s1.html#总结-最近一个-项目-所用的新知识" class="sidebar-link">总结 最近一个 项目 所用的新知识</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vuepress-blog/summary/s1.html#_1-在-vue-中新建标签页" class="sidebar-link">1. 在 Vue 中新建标签页</a></li><li class="sidebar-sub-header"><a href="/vuepress-blog/summary/s1.html#_2-分离-el-dialog" class="sidebar-link">2. 分离 el-dialog</a></li><li class="sidebar-sub-header"><a href="/vuepress-blog/summary/s1.html#_3-vue-router-小知识" class="sidebar-link">3. Vue-router 小知识</a></li><li class="sidebar-sub-header"><a href="/vuepress-blog/summary/s1.html#_4-localstorage-和-vuex-结合" class="sidebar-link">4. localstorage 和 vuex 结合</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="总结-最近一个-项目-所用的新知识"><a href="#总结-最近一个-项目-所用的新知识" class="header-anchor">#</a> 总结 最近一个 项目 所用的新知识</h2> <p>本人大二，最近参加了中国计算机设计大赛，与队友合作完成了 基于 风险治理与管控系统
这是我第一次独立的完成 一个完整的 Vue 项目，其中学习到很多知识 需要记录下</p> <h3 id="_1-在-vue-中新建标签页"><a href="#_1-在-vue-中新建标签页" class="header-anchor">#</a> 1. 在 Vue 中新建标签页</h3> <p>大家都知道，vue 秉持的是<span style="color:#E05749;">SPA</span>，也就是<strong>单页面复应用</strong>，一般不会又跳转一个新的页面的行为。 本次项目业务中就存在，点击之后进入另一个页面进行操作</p> <ul><li>Api：router.resolve(location, current?, append?) <a href="https://router.vuejs.org/zh/api/#router-resolve" target="_blank" rel="noopener noreferrer">vue-router 官方文档<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a><br>
这里我们只用第一个参数： location ：一个描述 目标位置的对象/路由对象</li></ul> <p>参数 location：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>路由常用属性包括：
route<span class="token punctuation">.</span>path  <span class="token comment">//路径</span>
route<span class="token punctuation">.</span>params <span class="token comment">//动态片段和全匹配片段，</span>
route<span class="token punctuation">.</span>query <span class="token comment">//表示 URL 查询参数</span>
route<span class="token punctuation">.</span>name <span class="token comment">//组件命名</span>
</code></pre></div><p>返回值</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> resolved<span class="token operator">:</span> <span class="token punctuation">{</span>
  location<span class="token operator">:</span> Location<span class="token punctuation">;</span>
  route<span class="token operator">:</span> Route<span class="token punctuation">;</span>
  href<span class="token operator">:</span> string<span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token operator">=</span> router<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>location<span class="token punctuation">,</span> current<span class="token operator">?</span><span class="token punctuation">,</span> append<span class="token operator">?</span><span class="token punctuation">)</span>
</code></pre></div><p>而返回值的<strong>href</strong> 可以直接使用 window.open 打开，即可新建一个页面</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token punctuation">{</span> href <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    path<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/task/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token keyword">this</span><span class="token punctuation">.</span>tableType<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token comment">//进入任务详情页</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>href<span class="token punctuation">,</span> <span class="token string">'_blank'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//_blank 打开一个新的页面</span>
</code></pre></div><p>需要注意的是 ：在新的页面与原页面，共享 全局的 router，<span style="color:#E05749;">但是 Vuex 的数据无法共享</span>（当然可以跨页的性质，cookie 、localstorage 可以共享）</p> <h3 id="_2-分离-el-dialog"><a href="#_2-分离-el-dialog" class="header-anchor">#</a> 2. 分离 el-dialog</h3> <p>在 ElementUi 中，el-dialog 是一个对话框，一般会将它和父容器分离。例如页面上有很多展示信息，其中有一个信息可以修改，至于具体如何修改，我们用 el-dialog 去做，这时将它和外层进行分离是一个明智的选择：</p> <div class="language-html extra-class"><pre class="language-html"><code>//父组件
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>AllocateDialog</span>
    <span class="token attr-name">:dialogVisible.sync</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>allocateVisible<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>all_dia<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">@allocate</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>allocate<span class="token punctuation">&quot;</span></span>
    <span class="token attr-name">taskType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>d<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>AllocateDialog</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                allocateVisible<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

//子组件
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-dialog</span>
        <span class="token attr-name">:visible</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>dialogVisible<span class="token punctuation">&quot;</span></span>
        <span class="token attr-name"><span class="token namespace">@update:</span>visible</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>$emit('update:dialogVisible', false)<span class="token punctuation">&quot;</span></span>
    <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-dialog</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>解释</strong>
一旦分离 el-dialog 组件,由于组件嵌套层次过多，.sync 修饰符 就不能再继续使用 ，<span style="color:#E05749;">只能手动的将更深层次组件 对 visible 的变化 反应到 el-dialog 组件上，</span> 并继续向上传递
当点击 对话框遮罩层，或者点击 关闭图标后，el-dialog 的内部组件会向上 emit 一个参数为<span style="color:#E05749;">update：visible,false</span> 的事件，而 el-dialog 组件，必须继续向上 emit，才能正确关闭 对话框</p> <h3 id="_3-vue-router-小知识"><a href="#_3-vue-router-小知识" class="header-anchor">#</a> 3. Vue-router 小知识</h3> <ul><li>使用 props 将组件和$route 解耦</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    routes<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            path<span class="token operator">:</span> <span class="token string">'/task_location:name'</span><span class="token punctuation">,</span> <span class="token comment">//通过 动态路由 传参</span>
            component<span class="token operator">:</span> TaskLocation<span class="token punctuation">,</span>
            props<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
            <span class="token comment">//将 params.name 映射到 组件的 props上，当然前提是 组件的props 声明 属性 name</span>
            meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> <span class="token string">'任务定位'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="_4-localstorage-和-vuex-结合"><a href="#_4-localstorage-和-vuex-结合" class="header-anchor">#</a> 4. localstorage 和 vuex 结合</h3> <p>vuex 一旦刷新就会失去保存的状态，是很让人头疼的事情，但可以借助 localstorage 或者 sessionstorage/cookie 等 浏览器存储 与 vue 配合来存储状态</p> <p>主要关键点是：<strong>监听组件的 mounted 生命周期</strong>
因为，页面刷新后首先触发的 是 mounted 事件，在此时，把存储在 sessionstorage 的数据保存到 vuex 中</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//home.vue 组件内</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'reqDangerTypes'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//刷新重新获取终端人员</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'reqStaffs'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">//vuex actions 中</span>
<span class="token comment">//第一次记载页面/页面刷新 后 主动获取 风险类型</span>
 actions<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token keyword">async</span> <span class="token function">reqDangerTypes</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">getDangerTypes</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                    page<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                    limit<span class="token operator">:</span> <span class="token number">9999</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>res<span class="token punctuation">.</span>flag<span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'隐患类型获取失败'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                    <span class="token keyword">return</span> <span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">'failed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span>
                <span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">'getDangerTypes'</span><span class="token punctuation">,</span> res<span class="token punctuation">.</span>riskTypes<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword">return</span> <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
 <span class="token punctuation">}</span>

</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
    <script src="/vuepress-blog/assets/js/app.c2c176f8.js" defer></script><script src="/vuepress-blog/assets/js/2.cfb39290.js" defer></script><script src="/vuepress-blog/assets/js/10.e6cc7d41.js" defer></script>
  </body>
</html>
